import { EChartsOption } from 'echarts'

export const funnelOption: EChartsOption = {
  title: {
    text: '',
    textStyle: {
      fontSize: 16,
      color: '#000'
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: (param) => {
      return `${param.name}：${param.value - 10}`
    }
  },
  series: [
    {
      name: '',
      type: 'funnel',
      left: '0',
      right: '10%',
      top: 50,
      bottom: 20,
      width: 'auto',
      min: 10,
      minSize: '10%',
      maxSize: '100%',
      sort: 'descending',
      gap: 1,
      label: {
        show: true,
        color: '#fff',
        position: 'inside',
        formatter: '{c}'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: []
    }
  ]
}

export const candlestickOption: EChartsOption = {
  title: {
    text: '',
    textStyle: {
      fontSize: 16,
      color: '#000'
    }
  },
  xAxis: {
    data: []
  },
  yAxis: {
    type: 'value',
    name: '单位：元/吨',
    nameTextStyle: {
      align: 'right'
    }
  },
  grid: {
    top: 60,
    bottom: 20,
    left: 80,
    right: 80
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    formatter: (params) => {
      const data = params[0].data
      return (
        params[0].name +
        '<br>' +
        '开始价格:' +
        data[1] +
        '(元/吨)<br>' +
        '结束价格:' +
        data[2] +
        '(元/吨)<br>' +
        '最低价:' +
        data[3] +
        '(元/吨)<br>' +
        '最高价:' +
        data[4] +
        '(元/吨)'
      )
    }
  },
  series: [
    {
      type: 'candlestick',
      barMaxWidth: 25,
      data: [],
      itemStyle: {
        color0: '#47D9B6',
        color: '#FF4D4F',
        borderColor0: '#47D9B6',
        borderColor: '#FF4D4F'
      }
    }
  ],
  dataZoom: [
    {
      type: 'slider',
      start: 50,
      end: 100,
      height: 16,
      handleSize: '100%',
      moveHandleSize: 14
    }
  ]
}

export const barOption: EChartsOption = {
  title: {
    text: '',
    textStyle: {
      fontSize: 16,
      color: '#000'
    }
  },
  color: ['#47D9B6', '#409EFE'],
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}(元/吨)'
  },
  legend: {
    bottom: 0,
    orient: 'horizontal',
    data: []
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 'auto'
    },
    data: []
  },
  yAxis: {
    type: 'value',
    name: '单位：元/吨',
    nameTextStyle: {
      align: 'right',
      padding: [0, -20, 0, 0]
    }
  },
  grid: {
    top: 60,
    bottom: 50,
    left: 80,
    right: 80
  },
  series: [],
  dataZoom: [
    {
      type: 'slider',
      left: 75,
      start: 50,
      end: 100,
      height: 16,
      bottom: 60,
      handleSize: '100%',
      moveHandleSize: 14
    }
  ]
}

export const pieOption: EChartsOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c}万吨'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: []
  },
  series: [
    {
      type: 'pie',
      radius: '55%',
      center: ['60%', '60%'],
      data: []
    }
  ]
}

export const barsOption: EChartsOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: {
    top: 30,
    left: 80,
    right: 80,
    bottom: 30
  },
  legend: {
    show: false
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '单位：万吨',
      nameTextStyle: {
        align: 'right'
      }
    },
    {
      type: 'value',
      name: '单位：万元',
      nameTextStyle: {
        align: 'left'
      }
    }
  ],
  series: [],
  dataZoom: [
    {
      type: 'slider',
      start: 50,
      end: 100,
      height: 16,
      bottom: 40,
      handleSize: '100%',
      moveHandleSize: 14
    }
  ]
}
